<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem>订单管理</BreadcrumbItem>
      <BreadcrumbItem>全部订单</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" :model="request" inline>
      <FormItem>
        商品名称：<Input
        type="text"
        clearable
        style="width: 120px"/>
      </FormItem>
      <FormItem>
        设备名称: <Input
        type="text"
        clearable
        style="width: 120px"/>
      </FormItem>
      <FormItem>
        设备编号: <Input
        type="text"
        clearable
        style="width: 120px"/>
      </FormItem>
      <br>
      <FormItem>
        订单号：<Input
        type="text"
        clearable
        style="width: 120px"/>
      </FormItem>
      <FormItem>
        活动ID：<Input
        type="text"
        clearable
        style="width: 120px"/>
      </FormItem>
      <FormItem>
        手机号: <Input
        type="text"
        clearable
        style="width: 120px"/>
      </FormItem>
      <br>
      <FormItem>
        创建时间:
        <DatePicker
          type="daterange"
          @on-change="timechange"
          :transfer="true"
          placement="bottom-end"
          placeholder="请选择开始-结束时间"
          style="width: 200px"></DatePicker>
      </FormItem>
      <FormItem>
        审核状态：<Select placeholder="请选择" style="width: 120px;">
        <Option value="0">+30%</Option>
        <Option value="1">+20%</Option>
      </Select>
      </FormItem>
      <br>
      <FormItem>
        支付时间:
        <DatePicker
          type="daterange"
          @on-change="timechange"
          :transfer="true"
          placement="bottom-end"
          placeholder="请选择开始-结束时间"
          style="width: 200px"></DatePicker>
      </FormItem>
      <FormItem>
        售后状态：<Select placeholder="请选择" style="width: 120px;">
        <Option value="0">成功</Option>
        <Option value="1">失败</Option>
      </Select>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>
        <Button type="primary" @click="search" style="margin-right: 10px">导出</Button>
      </FormItem>
    </Form>
    <div>
      <Table border :columns="columns2" :data="data2" max-height="200">
        <!--查看详情和审核按钮-->
        <template slot-scope="{ row }" slot="option">
          <div class="optionWrapper">
            <Button type="primary" v-hasPermission="['38']" size="small" style="margin-right: 5px">查看详情</Button>
            <Button type="primary" v-hasPermission="['38']" size="small" style="margin-right: 5px">售后</Button>
            <Button type="primary" v-hasPermission="['38']" size="small" style="margin-right: 5px"
                    @click="$router.push('/orders/examine')">审核
            </Button>
          </div>
        </template>
      </Table>
    </div>
    <div style="display: flex; justify-content: center; margin-top: 24px">
      <Page style="display: flex;justify-content: center;margin-top: 24px;" :total="page.count" :page-size="20"
            :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer show-total
            @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"/>
    </div>
    <Modal v-model="modal1" :mask-closable="false">
      <Form ref="formAddShop" :label-width="110">
        <div class="door_device"><h4>2110251527197981-支付记录</h4></div>
        <Table :columns="columns3" :data="data3"></Table>
      </Form>
    </Modal>

  </div>
</template>

<script>
export default {
  data () {
    return {
      request: {
        name: '',
        loading: false
      },
      columns2: [
        {
          title: '订单号',
          key: 'id',
          align: 'center'
        },
        {
          title: '订单详情',
          key: 'order_details',
          align: 'center',
          minWidth: 80
        },
        {
          title: '设备名称',
          key: 'activity_id',
          align: 'center'
        },
        {
          title: '设备编号',
          key: 'device_nums',
          align: 'center'
        },
        {
          title: '用户账户',
          key: 'pay_status',
          align: 'center'
        },
        {
          title: '用户名称',
          slot: 'user_name',
          minWidth: 80,
          align: 'center'
        },
        {
          title: '审核状态',
          key: 'start_status',
          align: 'center'
        },
        {
          title: '售后状态',
          key: 'last_status',
          align: 'center'
        },
        {
          title: '订单总额',
          key: 'order_money',
          align: 'center'
        },
        {
          title: '订单日期',
          key: 'orders_time',
          align: 'center'
        },
        {
          title: '支付时间',
          key: 'pay_time',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'option',
          minWidth: 100,
          align: 'center'
        }
      ],
      data2: [
        {
          id: '001',
          order_details: '一支笔'
        },
        {
          id: '002',
          order_details: '一个水果'
        },
        {
          id: '003',
          order_details: '一种颜色'
        }
      ],
      params: {
        device_time: [],
        status: 1,
        user_id: '',
        order_id: '',
        activity_id: '',
        page: 1,
        limit: 10
      },
      total: 0,
      page: {},
      height: this.$store.state.height,
      modal1: false,
      modal2: false,
      modal3: false,
      data1: [
        {
          id: 1,
          title: '机器组3'
        },
        {
          id: 2,
          title: '机器组4'
        }
      ],
      request: {
        device_number: '',
        page: 1
      },
      tableData: [],
      role_id: null
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    pays () {
      this.cancel()
      this.modal1 = true
      this.allocated = []
      this.undistributed = []
      if (this.infoID == 6) {
        console.log('6')
        this.axios.post('device/getAllDev').then(res => {
          if (res.code == 1) {
            this.allocated = res.data.allocated
            this.undistributed = res.data.undistributed
          }
        })
      }
    },
    init () {
      this.axios.post('shop/shop_list').then((res) => {
        if (res.code === 1) {
          console.log(res)
          this.total = res.data.count
          this.tableData = res.data.list
        }
      })
    },
    search () {
      this.params.page = 1
      this.init()
    },
    confirm () {
      this.modal1 = false
      this.$Message.success('保存成功！')
      this.cancel()
    },
    cancel () {
    },
    setStatus (id, status) {
      var text = '确定要' + (status == 1 ? '启用' : '禁用') + '此机器组么？'
      this.$Modal.confirm({
        title: text,
        onOk: () => {
          this.$Message.success('操作成功')
        },
        onCancel: () => {
        }
      })
    },
    timechange (val) {
      console.log(val)
    },
    handleSizeChange (val) {
      this.request.page = 1
      this.request.limit = val
      this.lists()
    },
    handleCurrentChange (val) {
      this.params.page = val
      this.init()
    },
    changeUserMsg (item, type) {
      console.log('现在的type', type)
      this.type = type
      if (type == 1) {
        this.title = '编辑'
        this.addformInline.title = item.title
        this.addformInline.remarks = item.remarks
        this.addformInline.id = item.id
        this.addUserOrChange = true
      } else if (type == 2) {
        if (this.addformInline.id) {
          this.addformInline.id = null
        }

        this.title = '添加'
        this.$Modal.confirm({
          title: '确定要添加角色？',
          onOk: () => {
            this.addUserOrChange = true
          },
          onCancel: () => {
          }
        })
      }
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.door_device {
  position: relative;
  top: -20px;
}

</style>

<style scoped>
.optionWrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>
